<template>
  <h1 @click="Jump({ path: '/about', query: { id: 123 } })">{{ state.name }}</h1>
  <Field v-model="state.name" label="文本" placeholder="请输入用户名" maxlength="5" />
  <Image class="code_img" :src="codeImg" @click="getCodePage"></Image>
  <Button>666</Button>
</template>

<script setup lang='ts'>
import router from '../router'
import { onMounted, reactive, ref } from 'vue'
import { getCode } from '../api'

import { Button, Image, Field } from 'vant'
import { RouteLocationRaw } from 'vue-router'

let codeImg = ref('')

onMounted(() => {
  getCodePage()
})

const getCodePage = () => {
  getCode({
    captchaCodeNo: '123',
    codeCount: 4,
    height: 150,
    lineCount: 2,
    width: 500
  }).then(res => {
    codeImg.value = window.URL.createObjectURL(res)
  })
}

const state = reactive({
  name: '江'
})
const Jump = (url: RouteLocationRaw) => {
  router.push(url)
}
</script>

<style scoped lang='scss'>
$pink: pink;
.code_img {
  width: 375px;
}

h1 {
  background-color: $pink;
  text-align: center;
  line-height: 1.8;
}
</style>